<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <title>日志查看</title>
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap-theme.min.css">
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
</head>

<body>
  <nav class="navbar navbar-default">
    <div class="container-fluid">
      <div class="navbar-header">
        <a class="navbar-brand" href="#">日志查看</a>
      </div>
    </div>
  </nav>
  <style>
      ::-webkit-scrollbar{width:5px}
  ::-webkit-scrollbar-thumb{width:5px;background:#CBCBCB}
  ::-webkit-scrollbar-thumb:hover{background:#003757}
    .container_box{
      border-radius: 2px;
      border:1px solid rgb(173, 173, 173);
      box-shadow: 0 0 5px #999;
      padding:0;
      display: flex;
      flex-direction: column;
      user-select: none;
    }
    .headers{
      display: flex;
      flex-shrink: 0;
    }
    .headers .btns{
      height:35px;line-height: 35px;
      flex-grow: 1;
      text-align: center;
      cursor: pointer;
    }
    .headers .btns.active{
      background:#ccc;
    }
    .listbox{
      height:700px;
      display:none;
      overflow: hidden;
      overflow-y: auto;
    }
    .listbox.active{
      display: block;
    }
    thead th{
      text-align: center;
    }
    tbody p{
      text-align: center;padding:0;margin:0;
    }
    tbody tr:hover{
      background:#eee;
    }
    tbody td.code:active{
      background:#cc9;
    }
    tbody td.code p{
      text-align: left;
      white-space: nowrap;
      overflow: hidden;
      max-width:720px;
      text-overflow: ellipsis;
    }
    .table-bordered{
      flex-shrink: 0;margin-bottom: 0;
    }
    #showcode{
      position: fixed;top:0;left:0;width:100%;height:100%;
      background:rgba(0,0,0,0.5);z-index: 999;display: none;
    }
    .showcode{
      position: absolute;top:50%;left:50%;
      width:750px;height:500px;transform: translate(-50%,-50%);
      border-radius: 5px;padding:10px;
      border:5px #fff solid;
      font-size: 16px;
    }
  </style>
  <div id="showcode">
    <div class="showcode" id="editor2"></div>
  </div>
  <div class="container container_box">
    <div class="headers">
      <div class="btns active">客户端</div>
      <div class="btns">服务端</div>
    </div>
    <table class="table table-bordered" style="margin-bottom: 0px;border-bottom: none;">
      <thead>
        <tr><th width="158">时间</th><th width="126">事件名字</th><th width="78">等级</th><th width="68">类型</th><th>结果</th>
        </tr>
      </thead>
    </table>
    <div class="client listbox active">
      <table class="table table-bordered">
        <tbody class="chtml"></tbody>
      </table>
    </div>
    <div class="server listbox">
      <table class="table table-bordered">
        <tbody class="shtml"></tbody>
      </table>
    </div>
  </div>
  <script>
    var editor2,client_logslist,server_logslist
    $(function () {
      editor2 = ace.edit("editor2");
      editor2.setTheme("ace/theme/monokai");
      editor2.session.setMode("ace/mode/javascript");
      editor2.getSession().setTabSize(2);
      editor2.setReadOnly(true);
      $.post('/logs/get', function (res) {
        if (res.status === 1) {
          var chtml = ''
          var shtml = ''
          res.resulr.reverse()
          res.resulr.forEach((item) => {
            let str = `<tr><td width="190"><p>${fromDate(item.time)}</p></td><td width="160"><p>${item.name}</p></td><td width="80"><p>${item.level}</p></td><td width="80"><p>${item.type}</p></td><td class="code"><p>${JSON.stringify(item.result)}</p></td></tr>`
            if (item.type === '客户端') {
              chtml += str
            } else {
              shtml += str
            }
          })
          $('.chtml').html(chtml)
          $('.shtml').html(shtml)
        } else {
          alert('获取日志出错')
          window.location.reload()
        }
        console.log(res)
      })
      $('tbody').on('click','td.code', function () {
        var obj = JSON.parse($(this).find('p').text())
        editor2.setValue(JSON.stringify(obj, null, 2));
        $('#showcode').fadeIn();
      })
      $('#showcode').click(function (){
        $('#showcode').fadeOut();
      })
      $('.showcode').click(function (event){
        event.stopPropagation();
      })

      $('.headers .btns').click(function(){
        if ($(this).hasClass('active')) return
        $('.headers .btns').removeClass('active')
        $(this).addClass('active')
        var index = $(this).index()
        $('.listbox').removeClass('active')
        $('.listbox').eq(index).addClass('active')
      })
    })


    function fromDate (time) {
      var _date = new Date(time)
      var year = _date.getFullYear();
      var month = _date.getMonth()+1 > 9 ? _date.getMonth()+1 : '0' + (_date.getMonth()+1);
      var day = _date.getDate() > 9 ? _date.getDate() : '0' + (_date.getDate());
      var hours = _date.getHours() > 9 ? _date.getHours() : '0' + (_date.getHours());
      var min = _date.getMinutes() > 9 ? _date.getMinutes() : '0' + (_date.getMinutes());
      var sc = _date.getSeconds() > 9 ? _date.getSeconds() : '0' + (_date.getSeconds());
      return `${year}-${month}-${day} ${hours}:${min}:${sc}`
    }
  </script>
  <script src="/static/js/ace-builds-master/src-noconflict/ace.js" type="text/javascript" charset="utf-8"></script>
  <script src="/static/js/jquery.autocompleter.js" type="text/javascript" charset="utf-8"></script>
</body>

</html>